<template>
  <div class="manage tc">
    <button v-on:click="toggleAdd">{{isAdd ? '关闭' : '新增'}}</button>
    <div class="input-area" v-show="isAdd">
      <input type="text" placeholder="请输入员工姓名" v-model="Ename"/>
      <input type="text" placeholder="请输入员工年龄" v-model="Eage"/>
      <select v-model="Edeptno">
        <option v-for="dept in depts" :value="dept.Dno">{{dept.Dname}}</option>
      </select>
      <button v-on:click="add">确定</button>
    </div>
    <table>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>部门</th>
        <th>操作</th>
      </tr>
      <tr
        v-for="(item, index) in people"
        :key="item.Eno"
      >
        <td>{{item.Eno}}</td>
        <td>{{item.Ename}}</td>
        <td>{{item.Eage}}</td>
        <td>{{item.dept.Dname}}</td>
        <td>
          <span @click="edit(index)">编辑</span>&nbsp;&nbsp;<span @click="del(item.Eno)">删除</span>
        </td>
      </tr>
    </table>
    <div class="wrap" v-show="isEdit">
      <div class="content">
        <input type="text" placeholder="请输入员工姓名" v-model="Ename"/>
        <input type="text" placeholder="请输入员工年龄" v-model="Eage"/>
        <select v-model="Edeptno">
          <option
            v-for="dept in depts"
            :value="dept.Dno"
          >{{dept.Dname}}</option>
        </select>
        <button @click="cancel">取消</button>
        <button @click="doEdit">确认</button>
      </div>
    </div>
    <bottom :isManage="true"></bottom>
  </div>
</template>

<script>
  import axios from 'axios'
  import Vue from 'vue'
  import Bottom from '@/components/bottom.vue'

  export default {
    name: "index",
    components: {
      Bottom
    },
    data(){
      return {
        isNowPage: true,
        isAdd: false,
        isEdit: false,
        people: [],
        depts: [],
        Eno: '',
        Ename: '',
        Eage: 0,
        Edeptno: 0,
      }
    },
    methods: {
      toggleAdd() {
        this.isAdd = !this.isAdd;
      },
      add() {
        if (this.Ename.trim() === '') {
          alert('请输入姓名')
        } else {
          axios.post('/api/emplist/add.html',{
            Ename: this.Ename,
            Eage: this.Eage,
            Edeptno: this.Edeptno
          })
            .then((res) => {
              console.log(res)
              this.people.push(res.data.data);
              this.Ename = '';
              this.Eage = '';
              this.Edeptno = '';
            })
            .catch((err) => {
              console.log(err);
            });
        }
      },
      del(eno) {
        axios.get('/api/emplist/del.html?no=' + eno)
          .then((res) => {
            console.log(res);
            let i = this.people.findIndex(item => item.Eno === eno);
            this.people.splice(i, 1)
          })
          .catch((err) => {
            console.log(err);
          });
      },
      edit(index) {
        this.isEdit = true;
        let emp = this.people[index]
        this.Eno = emp.Eno
        this.Ename = emp.Ename
        this.Eage = emp.Eage
        this.Edeptno = emp.Edeptno
      },
      cancel() {
        this.isEdit = false;
      },
      doEdit() {
        axios.post('/api/emplist/edit.html',{
          Eno: this.Eno,
          Ename: this.Ename,
          Eage: this.Eage,
          Edeptno: this.Edeptno
        })
          .then((res) => {
            console.log(res)
            let i = this.people.findIndex(item => item.Eno === this.Eno);

            // this.people[i] = res.data.data
            Vue.set(this.people, i, res.data.data)

            // this.people[i].Ename = res.data.data.Ename
            // this.people[i].Eage = res.data.data.Eage
            // this.people[i].dept = res.data.data.dept
          })
          .catch((err) => {
            console.log(err);
          });

        this.isEdit = false;
      }
    },
    mounted() {
      axios.get('/api/emplist/index.html')
        .then((res) => {
          console.log(res);
          this.people = res.data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
      axios.get('/api/emplist/depts.html')
        .then((res) => {
          console.log(res);
          this.depts = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
</script>

<style scoped>

  .manage>button {width: 200px; background: #41b883; color: white; border: 0; padding: 10px 0; border-radius: 5px; margin-bottom: 10px}
  .input-area input {width: 200px; height: 20px; margin:20px 0; outline:none; border:1px solid green; font-size: 16px;}
  .input-area button { width:60px; height: 30px; background-color:#41b883; border: none; border-radius:5px; font-size:16px; color:#fff;}
  table{width:100%; max-width:500px; margin:0 auto; margin-top:20px;}
  th,td{width:100px;}
  tr input{width:100px; height:30px; padding-left:10px; outline:none; border:1px solid #333;}
  .wrap{display:table; position:fixed; top:0; left:0; height:100%; width:100%; background:rgba(0,0,0,.8); z-index: 10;}
  .wrap .content{display:table-cell; vertical-align:middle;}
  .wrap .content input{height: 40px; line-height: 40px; display:block; margin:0 auto; margin-bottom:10px; font-size:16px;}
  .wrap .content button{width:100px; height: 30px; line-height: 30px; background-color:#41b883; border: none; border-radius:5px; font-size:16px; color:#fff;}
</style>
